
.letter-space {
  letter-spacing: 1px;
}


.bg-model {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;


  background: #000;
  opacity: .3;
  z-index: 99;
}

.show {
  display: none;
  visibility: hidden;
}

.container {
  position: fixed;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 7rem;

  background: #FFF;
  z-index: 100;

  .letter-space();
}

.title {
  position: relative;
  text-align: center;

  font-size: .33rem;
  font-weight: 400;

  height: 1rem;
  line-height: 1rem;


  color: #b1b1b1;

  border-bottom: 1px solid #f1f1f1;
}

.close-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: .2rem;

  width: .72rem;
  height: .72rem;

  margin: auto 0;
}

@padding: .3rem;
.item-container {
  overflow-y: scroll;
  padding-left: .5rem;
  padding-bottom: .3rem;
  height: 6rem;
}

.item {
  padding-top: @padding;
  padding-bottom: @padding;
  border-bottom: 1px solid #f1f1f1;

  .item-title {
    margin: 0;
    font-size: .33rem;
    font-weight: 400;
    color: #4f4f4f;
  }

  .item-desc {
    margin-top: .2rem;
    font-size: .3rem;
    font-weight: 400;

    color: #ababab;

    display: block;
  }

  .item-icon {
    margin-right: .2rem;
    width: 1.2rem;

    display: inline-block;

    vertical-align: middle;
  }

  .item-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .item-opt {
    display: inline-block;

    vertical-align: middle;
  }

  span {
    display: block;
  }

  .item-title {
    font-size: .32rem;
    color: #313131;
  }

  .item-text {
    margin-top: .15rem;
    font-size: .22rem;
    color: #9c9c9c;
  }
}


